import { Switch } from '@/components/ui/switch'
import { FC } from 'react'
import styles from './index.module.css'
import { useNavigate, useParams } from 'react-router-dom'
import AILogo from '@/components/Form/modelForm/Icons'
import { useProviderStore } from '@/store/providerStore'
import { Button } from '@/components/ui/button'
import { Trash2 } from 'lucide-react'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import toast from 'react-hot-toast'

export interface IProviderCardProps {
  id: string
  providerName: string
  Icon: string
  enable: number
  type?: string
}

const ProviderCard: FC<IProviderCardProps> = ({
  providerName,
  Icon,
  id,
  enable,
  type = 'custom',
}: IProviderCardProps) => {
  const navigate = useNavigate()
  const { updateProvider, deleteProvider } = useProviderStore()
  
  const handleClick = () => {
    navigate(`/settings/model/${id}`)
  }
  
  const handleEnable = (e: React.MouseEvent) => {
    e.stopPropagation()
    updateProvider({
      id,
      enabled: enable == 1 ? 0 : 1,
    })
  }

  const handleDelete = async (e: React.MouseEvent) => {
    e.stopPropagation()
    try {
      await deleteProvider(id)
      toast.success('删除成功')
      // 如果当前正在查看被删除的供应商，则返回到设置页面
      const { id: currentId } = useParams()
      if (currentId === id) {
        navigate('/settings/model')
      }
    } catch (error: any) {
      toast.error(error.message || '删除失败')
    }
  }

  const { id: currentId } = useParams()
  const isActive = currentId === id

  return (
    <div
      onClick={handleClick}
      className={
        styles.card +
        ' flex h-14 items-center justify-between rounded border border-[#f3f3f3] p-2' +
        (isActive ? ' bg-[#F0F0F0] font-semibold text-blue-600' : '')
      }
    >
      <div className="flex items-center text-lg">
        <div className="flex h-9 w-9 items-center">
          <AILogo name={Icon} />
        </div>
        <div className="font-semibold">{providerName}</div>
      </div>

      <div className="flex items-center gap-2">
        <Switch
          onClick={handleEnable}
          checked={enable == 1}
        />
        
        {type !== 'built-in' && (
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8"
                onClick={(e) => e.stopPropagation()}
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>确认删除</AlertDialogTitle>
                <AlertDialogDescription>
                  你确定要删除 {providerName} 供应商吗？此操作不可撤销。
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel onClick={(e) => e.stopPropagation()}>取消</AlertDialogCancel>
                <AlertDialogAction onClick={handleDelete}>
                  确认删除
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        )}
      </div>
    </div>
  )
}

export default ProviderCard
